<template>
  <div class="page">
    <div :class="[showShadow?'nav-shadow':'', 'nav-container']">
      <Navbar :type="'back'" @onBack="onBack"></Navbar>
    </div>
    <div class="placeholder"></div>
    <div class="main-panel">

      <div class="content-canvas">
        <div class="content"  @scroll="onContentPanelScroll">
          <div class="info-canvas" :style="{marginTop:infoMargin+'px'}">
            <div class="border">
              <div class="title">{{title}}</div>
              <div class="sub-info">Sub info<br>Date: 2017/12/28 10:51</div>
            </div>
          </div>
          <div v-html="content">
          </div>
          <div class="footbar">
            <h2>Comment</h2>
            <Comment></Comment>
          </div>
        </div>
      </div>
    </div>
    <div class="tool-canvas">
      <zh-button :type="'dashed'" v-show="!isToolbarHidden" class="hide-tool-bar-item"></zh-button>
      <zh-button :type="'dashed'" v-show="isToolbarHidden" class="show-tool-bar-item"></zh-button>
      <zh-button :type="'dashed'" class="favourite-item"></zh-button>
      <zh-button :type="'dashed'" class="go-up-item"></zh-button>
    </div>
  </div>
</template>

<style>
  img {
    width: 100%;
  }
</style>

<style lang="less" scoped>


  .placeholder {
    /*height: 66px;*/
  }

  .main-panel {
    margin-top: 66px;
    height: calc(~"100% - 66px");
  }

  .page {
    position: absolute;
    top: 0;
    left: 0;
    text-align: left;
    width: 100%;
    height: 100%;
  }

  @infoCanvasHeight: 100px;
  @footbarHeight: 20vh;
  .info-canvas {
    height: @infoCanvasHeight;
    width: 100%;
    background: white;
  }

  & .border {
    padding: 5px 8px 0px 8px;
  }

  & .title {
    font-size: 30px;
  }

  & .sub-info {
    font-size: 15px;
    color: rgba(0, 0, 0, 0.4);
  }

  .content-canvas {
    height: calc(~"100%");
    width: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
  }

  & .content {
    height: calc(~"100% - 10px");
    padding: 10px 8px 0px 8px;
    overflow-y: auto;
  }

  .footbar {
    margin-top: 10px;
    height: @footbarHeight;
    text-align: center;
  }

  .tool-canvas {
    position: fixed;
    right: 0px;
    bottom: 100px;
    width: 32px;
    /*padding: 0 8px 0 8px;*/
  }

  /*
  icon
   */

  @iconSize: 32px;
  @imagePadding: 4px;
  .icon-style {
    border-radius: 16px;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
    background-color: white;
    margin-top: 10px;
    background-repeat: no-repeat;
    background-position: @imagePadding @imagePadding;
    background-size: @iconSize - @imagePadding * 2;
    height: @iconSize;
    width: @iconSize;
  }

  .hide-tool-bar-item {
    .icon-style;
    background-image: url("./img/fold.png");
  }

  .favourite-item {
    .icon-style;
    background-image: url("./img/like.png");
  }

  .go-up-item {
    .icon-style;
    background-image: url("./img/top.png");
  }

  .nav-container{
    z-index: 999;
  }

  .nav-shadow {
    box-shadow: 0px 40px 30px 20px #000;
  }

</style>

<script>
  let Navbar = resolve => {
    require(['../../components/blog_static_navbar'], resolve);
  }
  let Comment = resolve => {
    require(['@/components/comment'], resolve);
  }

  import ajax from '../../utils/geralt_common/network_function';
  import manageInterface from '../../interface/manageInterface';
  import zhButton from '@/components/buttom'

  export default {
    mounted(){
      let id = this.$route.query.item;
      ajax.get(manageInterface.adminBlogDocumentUrl + '/' + id, {},
        (item) => {
          this.title = item.data[0].title;
          this.content = item.data[0].document;
        })
      ajax.get(manageInterface.adminBlogDocumentUrl + '/comment', {},
        (item) => {

        }
      )
    },
    components: {
      Navbar,
      Comment,
      zhButton
    },
    data(){
      return {
        isToolbarHidden: false,
        title: "",
        content: "",
        hideInfo: false,
        infoMargin: 0,
        showShadow: false
      }
    },
    methods: {
      onBack(){
        this.$router.back();
      },
      onContentPanelScroll(a){
        let srcElement = a.srcElement;
        console.log(srcElement.scrollTop)
        if (srcElement.scrollTop > 100) {
//          this.hideInfo = true
          this.showShadow = true
//          this.infoMargin = 100 - srcElement.scrollTop < -100 ? -100 : 100 - srcElement.scrollTop
        } else {
//          this.infoMargin = 0
          this.showShadow = false
        }
      }
    }
  }
</script>
